<template>
  <!-- 工程师运维任务统计 -->
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel overflow-x" style="overflow-y: hidden;">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="开始时间：">
              <el-date-picker
                v-model="query.startTime"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="结束时间：">
              <el-date-picker
                v-model="query.endTime"
                value-format="yyyy-MM-dd"
                type="date"
                :clearable="false"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="所属项目部" prop="projectDepartmentId">
              <el-select v-model="query.projectDepartmentId" class="w-100" placeholder="请选择所属项目部" clearable filterable>
                <el-option
                  v-for="(item,index) in projectDepartmentIds"
                  :key="index+'projectDepartmentId'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="运维人员">
              <v-projectPersonnel
                ref="kll"
                @ch="ch"
              />
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form>
        </div>
        <div class="table-panel ">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 260px)"
            :data="tableData"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="departmentName" label="项目部" fixed />
            <el-table-column prop="realName" label="成员" fixed />
            <el-table-column label="运维活动-废水" align="center">
              <el-table-column label="废水主设备">
                <el-table-column prop="e051_01巡检" label="巡检" />
                <el-table-column prop="e051_01参数设置" label="参数设置" />
                <el-table-column prop="e051_01校准" label="校准" />
                <el-table-column prop="e051_01检修" label="检修" />
                <el-table-column prop="e051_01易耗品" label="易耗品" />
                <el-table-column prop="e051_01标样更换" label="标样更换" />
                <el-table-column prop="e051_01比对试验" label="比对试验" />
                <el-table-column prop="e051_01异常数据" label="异常数据" />
                <el-table-column prop="e051_01废液收集" label="废液收集" />
                <el-table-column prop="e051_01校验" label="校验" />
              </el-table-column>
              <el-table-column label="废水次设备" align="center">
                <el-table-column prop="e051_02巡检" label="巡检" />
                <el-table-column prop="e051_02校验" label="校验" />
                <el-table-column prop="e051_02比对试验" label="比对试验" />
                <el-table-column prop="e051_02故障维修" label="故障维修" />
              </el-table-column>
              <el-table-column label="水站设备" align="center">
                <el-table-column prop="e051_03数据核异" label="数据核异" />
                <el-table-column prop="e051_03校准" label="校准" />
                <el-table-column prop="e051_03运行记录" label="运行记录" />
                <el-table-column prop="e051_03试剂更换" label="试剂更换" />
                <el-table-column prop="e051_03故障报告" label="故障报告" />
                <el-table-column prop="e051_03比对试验" label="比对试验" />
                <el-table-column prop="e051_03月考核" label="月考核" />
                <el-table-column prop="e051_03巡检" label="巡检" />
                <el-table-column prop="e051_03检测快报" label="检测快报" />
                <el-table-column prop="e051_03准确度测定" label="准确度测定" />
                <el-table-column prop="e051_03线性检查" label="线性检查" />
                <el-table-column prop="e051_03检出限测定" label="检出限测定" />
              </el-table-column>
            </el-table-column>
            <el-table-column label="运维活动-废气" align="center">
              <el-table-column prop="e051_04量程漂移测定" label="量程漂移测定" />
              <el-table-column prop="e051_04到货验收" label="到货验收" />
              <el-table-column prop="e051_04设备管理" label="设备管理" />
              <el-table-column prop="e051_04维修" label="维修" />
              <el-table-column prop="e051_04易耗品更换" label="易耗品更换" />
              <el-table-column prop="e051_04标气更换" label="标气更换" />
              <el-table-column prop="e051_04异常数据" label="异常数据" />
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { countSatisfactionByMaintenance } from '@/api/base/statistics'
import VProjectPersonnel from '@/components/filter/personnelFilter'
import { getList as getDepartmentList } from '@/api/info/projectDepartment'
export default {
  name: 'Maintenance',
  components: {
    VProjectPersonnel
  },
  data() {
    return {
      query: {
        startTime: null,
        endTime: null,
        projectDepartmentId: null,
        engineerId: null
      },
      tableLoading: false,
      tableData: [],
      spanArr: [],
      position: 0,
      projectDepartmentIds: []
    }
  },
  created() {
    this.initData()
    this.rowspan()
    getDepartmentList().then(res => {
      this.projectDepartmentIds = res.data.list
    })
  },
  mounted() {},
  methods: {
    ch(id) { // 拿到v-projectPersonnel组键选择的人员id
      this.query.engineerId = id
    },
    initData() {
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      this.tableData=[]
      this.spanArr=[]
      const query = JSON.parse(JSON.stringify(this.query))
      countSatisfactionByMaintenance(query).then(res => {
        this.tableData = res.data.list
        this.rowspan()
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 重置
    handleReset() {
      this.query = {
        startTime: null,
        endTime: null,
        projectDepartmentId: null,
        engineerId: null
      }
    },
    // 导出
    handleExport() {
      this.exportLoading = true
      // this.tableHead
      // this.tableData

      import('@/utils/Export2Excel').then(excel => {
        const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
          'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        const multiHeader =
          [
            ['项目部', '成员', '运维活动-废水', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '运维活动-废气', '', '', '', '', '', ''],
            ['', '', '废水主设备', '', '', '', '', '', '', '', '', '', '废水次设备', '', '', '', '水站设备', '', '', '', '', '', '', '', '', '', '', '', '量程漂移测定', '到货验收', '设备管理', '维修', '易耗品更换', '标气更换', '异常数据']
          ] // 前两行的表头数据，二维数组，不够的用空白补全
        const header = ['', '', '巡检', '参数设置', '校准', '检修', '易耗品', '标样更换', '比对试管', '异常数据', '废液收集', '校验', '巡检', '校验', '比对试验', '故障维修', '数据核异', '校准', '运行记录', '试剂更换', '故障报告', '比对试验', '月考核', '巡检', '检测快报', '准确度测定', '线性检查', '检出限测定', '', '', '', '', '', '', ''] // 最后一行的表头数据
        const filterVal = ['departmentName', 'realName', 'e051_01巡检', 'e051_01参数设置', 'e051_01校准', 'e051_01检修', 'e051_01易耗品', 'e051_01标样更换', 'e051_01比对试管', 'e051_01异常数据', 'e051_01废液收集', 'e051_01校验', 'e051_02巡检', 'e051_02校验', 'e051_02比对试验', 'e051_02故障维修', 'e051_03数据核异', 'e051_03校准', 'e051_03运行记录', 'e051_03试剂更换', 'e051_03故障报告', 'e051_03比对试验', 'e051_03月考核', 'e051_03巡检', 'e051_03检测快报', 'e051_03准确度测定', 'e051_03线性检查', 'e051_03检出限测定', 'e051_04量程漂移测定', 'e051_04到货验收', 'e051_04设备管理', 'e051_04维修', 'e051_04易耗品更换', 'e051_04标气更换', 'e051_04异常数据']
        // 这里要注意 header  和 filterVal 的数组长度一定要相等，否则会报错
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        const merges = ['A1:A3', 'B1:B3', 'C1:AB1', 'AC1:AI1', 'C2:L2', 'M2:P2', 'Q2:AB2', 'AC2:AC3', 'AD2:AD3', 'AE2:AE3', 'AF2:AF3', 'AG2:AG3', 'AH2:AH3', 'AI2:AI3'] // 合并单元格的数据，如何合并参考上面图片讲解
        for (var i = 0; i < list.length; i = j) {
          for (var j = i + 1; j < list.length; j++) {
            if (list[i].departmentName != list[j].departmentName) {
              merges.push('A' + (i + 4) + ':' + 'A' + (j + 3))
              break
            } else if (j === list.length - 1) {
              merges.push('A' + (i + 4) + ':' + 'A' + (list.length - 1))
            }
          }
        }
        const styleRows = [1, 2, 3]
        const styleColumns = [1]
        excel.export_json_to_excel({
          multiHeader,
          styleColumns,
          header,
          merges,
          data,
          styleRows,
          filename: '工程师运维统计'
        })
      })
      this.exportLoading = false
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    // 表格数据调整
    rowspan() {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          if (this.tableData[index].departmentName === this.tableData[index - 1].departmentName) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
